<template>
  <div class="newshop-material">
    <!-- 头部导航 -->
    <div class="el-header">
      <el-menu router="" background-color="#eee" text-color="#303133" class="el-menu-demo" mode="horizontal">
        <el-menu-item index="/main">首页</el-menu-item>
        <el-menu-item index="/2">官方素材库</el-menu-item>
      </el-menu>
    </div>

    <!-- 卡片试图 -->
    <el-card>
      <el-form :inline="true" :model="form" class="demo-form-inline" ref="materialForm">
        <el-form-item label="素材名称" prop="name">
          <el-input v-model="form.name" placeholder="素材名称"></el-input>
        </el-form-item>
        <el-form-item label="素材类别" prop="type">
          <el-select v-model="form.type" placeholder="素材类别">
            <el-option v-for="item in typelist" :key="item.id" :label="item.name" :value="item.name"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getselectmaterial">查询</el-button>
          <el-button type="primary" @click="clearform">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 上传素材按钮 -->
      <div class="Upload">
        <el-button type="primary" @click="dialogFormVisible = true">上传素材</el-button>
      </div>
      <!-- 表单内容区域 -->
      <el-table :data="tableData" style="width: 100%" class="fromtable">
        <el-table-column prop="material_name" label="素材名称" width="180"> </el-table-column>
        <el-table-column prop="material_img" label="素材图" width="180">
          <template slot-scope="scope">
            <img :src="scope.row.material_img" alt="" width="90" height="90" />
          </template>
        </el-table-column>
        <el-table-column label="素材类别">
          <template slot-scope="scope">
            <span>{{ scope.row.material_type }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="material_price" label="价格" width="180"> </el-table-column>
        <el-table-column label="上传日期">
          <template slot-scope="scope">
            <span>{{ scope.row.material_time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <!-- slot-scope="scope" -->
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="editmaterial(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 官方素材上传对话框 -->
    <el-dialog title="上传素材" :visible.sync="dialogFormVisible" class="materialedit">
      <el-form :model="form3" ref="addFormRef" :rules="rules">
        <el-form-item label="素材名称：" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form3.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="素材类别：" :label-width="formLabelWidth" prop="type">
          <el-select v-model="form3.type" placeholder="请选择素材类别">
            <!-- <el-option ></el-option> -->
            <el-option v-for="item in typelist" :key="item.id" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="素材价格：" :label-width="formLabelWidth" prop="price">
          <el-input v-model.number="form3.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="素材上传：" :label-width="formLabelWidth">
          <!-- :on-preview="handlePictureCardPreview" :on-remove="handleRemove" -->
          <el-upload :auto-upload="false" action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handleAvatarPreview">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addmaterial" class="edittrue">确定上传</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 官方素材编辑对话框 -->
    <el-dialog title="编辑素材" :visible.sync="dialogFormVisibles" class="materialedit">
      <el-form :model="form2">
        <el-form-item label="素材名称：" :label-width="formLabelWidth">
          <el-input v-model="form2.material_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="素材类别：" :label-width="formLabelWidth">
          <el-select v-model="form2.material_type" placeholder="请选择素材类别">
            <!-- <el-option ></el-option> -->
            <el-option v-for="item in typelist" :key="item.id" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="素材价格：" :label-width="formLabelWidth">
          <el-input v-model="form2.material_price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="素材图片：" :label-width="formLabelWidth">
          <!-- :on-preview="handlePictureCardPreview" :on-remove="handleRemove" -->
          <el-input v-model="form2.material_img" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editmaterialinfo(form2.id)" class="edittrue">确定修改上传</el-button>
        <el-button @click="dialogFormVisibles = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 图片浏览 -->
    <el-dialog title="图片预览" :visible.sync="imgshowdialogVisible" width="50%">
      <img :src="Previewlist" alt="" srcset="" class="imgsize" />
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  name: 'NewshopMaterial',
  props: {},
  data() {
    return {
      value: '',
      tableData: [],
      dialogFormVisible: false,
      dialogFormVisibles: false,
      form: {
        name: '',
        type: ''
      },
      form2: {
        listval: []
      },
      form3: {
        name: '',
        type: '',
        price: 0,
        imgurl: ['/images/material/1.jpg', '/images/material/2.jpg', '/images/material/33.jpg']
      },
      formLabelWidth: '120px',
      // 类别数据列表
      typelist: [],
      // 图片地址
      Previewlist: '',
      // 游览效果隐藏与显示
      imgshowdialogVisible: false,
      // 表单验证规则对象
      rules: {
        name: [{ required: true, message: '请输入素材名称', trigger: 'blur' }],
        type: [{ required: true, message: '请选择素材类别', trigger: 'change' }],
        price: [{ type: 'number', required: true, message: '请输入价格', trigger: 'blur' }]
      }
    }
  },

  components: {},

  mounted() {},

  created() {
    this.getmaterialinfo()
    this.getbusinesses()
  },

  methods: {
    // 获取官方素材数据
    async getmaterialinfo() {
      const { data } = await this.$http.get('/materials')
      // console.log(data)
      this.tableData = data
    },
    // 获取所有类别
    async getbusinesses() {
      const { data: res } = await this.$http.get('/businesses')
      this.typelist = res
    },
    // 查询数据
    async getselectmaterial() {
      this.tableData = []
      const str = this.form.name + this.form.type
      if (str === '') {
        this.getmaterialinfo()
        return this.getbusinesses()
      }
      if (this.form.name !== '') {
        const { data: res1 } = await this.$http.get(`/materials?material_name_like=${this.form.name}`)
        this.tableData = res1
        console.log(this.tableData)
      }
      if (this.form.type !== '') {
        const { data: res2 } = await this.$http.get(`/materials?material_type_like=${this.form.type}`)
        res2.forEach((element) => {
          if (!this.tableData.find((item) => element.id === item.id)) {
            this.tableData.push(element)
          }
        })
        // console.log(this.tableData)
        this.getbusinesses()
      }
    },
    // 重置表单
    clearform() {
      this.$refs.materialForm.resetFields()
      this.getmaterialinfo()
      this.getbusinesses()
    },
    // 图片预览效果
    handleAvatarPreview(filter) {
      console.log(filter)
      this.Previewlist = filter.url
      this.imgshowdialogVisible = true
    },
    // 编辑对话框
    async editmaterial(val) {
      this.dialogFormVisibles = true
      this.form2 = val
      // console.log(this.form2)
    },
    // 上传素材
    addmaterial() {
      this.dialogFormVisible = false
      // console.log(typeof this.form3.price)
      // 表单预校验
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) {
          this.dialogFormVisible = true
          return this.$message.error('请填写全部必填项')
        }
        await this.$http.post('/materials', {
          material_name: this.form3.name,
          material_price: this.form3.price,
          material_type: this.form3.type,
          material_img: this.form3.imgurl[0],
          material_time: dayjs().format('YYYY-MM-DD')
        })
        this.getmaterialinfo()
      })
      // console.log(this.form)
      // console.log(new Date())
    },
    // 修改素材数据
    async editmaterialinfo(id) {
      // console.log(id)
      await this.$http.put(`/materials/${id}`, {
        material_name: this.form2.material_name,
        material_price: this.form2.material_price,
        material_type: this.form2.material_type,
        material_img: this.form2.material_img,
        material_time: this.form2.material_time
      })
      this.getmaterialinfo()
      this.dialogFormVisibles = false
      this.form2 = {}
    },
    watch() {}
  }
}
</script>
<style lang='less' scoped>
.newshop-material {
  background-color: #eee;
  width: 100%;
  .el-header {
    color: #333;
    padding: 0;
    .el-row {
      margin-top: 32px;
      padding-left: 20px;
    }
    .el-button {
      margin-left: 0;
    }
  }
  .el-row {
    border: 1px solid #000;
    padding: 20px 40px;
    border-radius: 8px;
  }
  .fromtable {
    border-top: 1px solid #000;
  }
  .Upload {
    margin: 10px 0;
  }
  .materialedit {
    min-width: 1200px;
  }
  .dialog-footer {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .edittrue {
    margin-right: 50px;
  }
  .imgsize {
    width: 100%;
  }
}
</style>
